<script setup>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  title: {
    type: String,
  },
  searchable: {
    type: Boolean,
    default: false,
  },
  onChange: {
    type: Function,
    default: event => null,
  },
});

const search = ref('');
</script>

<template>
  <div class="tree-filter">
    <template v-if="props.title">
      <header>
        <slot name="title">{{ props.title }}</slot>
      </header>
    </template>
  
    <template v-if="props.searchable">
      <a-input v-model:value="search" placeholder="输入关键词" @change="props.onChange">
        <template #suffix><search-outlined style="color: rgb(181,181,181);" /></template>
      </a-input>
    </template>
  
    <slot></slot>
  </div>
</template>

<style>
.tree-filter {
  padding-left: 16px;
  padding-right: 16px;
  background: #fff;
  border-radius: 6px;
}

.tree-filter > header {
  line-height: 3;
  border-bottom: 1px solid rgb(228,228,228);
  margin-bottom: 14px;
}

.tree-filter > .ant-input-affix-wrapper { margin-bottom: 14px; }

.tree-filter > .ant-menu-inline { border-right: 0; }
.tree-filter .ant-menu-submenu-title { padding-left: 0; }
.tree-filter .ant-menu-submenu-arrow { right: 12px; }

.tree-filter .ant-menu-item-selected { border-radius: 6px; }
.tree-filter .ant-menu-item-selected::after { content: none; }

.tree-filter .ant-menu-sub.ant-menu-inline {
  padding-left: 10px;
  background: transparent;
}
</style>
